import React, { Component, useEffect } from 'react';
import { connect } from 'umi';
import data from '@/assets/data/map.json';
import * as echarts from 'echarts';
// import  'babel-loader!echarts/extension/bmap/bmap.js';
import 'echarts/extension/bmap/bmap.js';
import { loadBMap } from '@/assets/js/map';
import mapStyle from './custom_map_config.json';
import {
  Map,
  Marker,
  NavigationControl,
  InfoWindow,
  MapApiLoaderHOC,
  ZoomControl,
  Polyline,
  Polygon,
} from 'react-bmapgl';
import styles from './index.less';
import pathData from './data.json';
import _ from 'lodash';
import overlaydata from '../../../src/assets/data/overlayMap.json';
import luyiboundary from '../../assets/data/map/boundary/luyi.json';
import danchengboundary from '../../assets/data/map/boundary/dancheng.json';
import data_qingshui_1 from '@/assets/data/river/qingshui1.json';
import data_qingshui_2 from '@/assets/data/river/qingshui2.json';
import data_qingshui_3 from '@/assets/data/river/qingshui3.json';
import data_qingshui_4 from '@/assets/data/river/qingshui4.json';
import data_luxin_1 from '@/assets/data/river/luxin1.json';
import data_luxin_2 from '@/assets/data/river/luxin2.json';
import { Map_AK } from '@/utils/url';

const riverData = [data_qingshui_1, data_qingshui_2, data_qingshui_3, data_qingshui_4, data_luxin_1, data_luxin_2].map(item => {
  return item[0].map(dot => {
    return dot.coord
  })
})
const colorData = ['#84D7AE', '#FFD700', '#40b6ff', '#FFA500', '#FFD700', '#ff4043']
class MapChart extends Component {
  componentDidMount() {
    this.Map = React.createRef();
    console.log(riverData)
  }
  render() {
    return (
      <div
        style={{
          background: 'rgba(8, 28, 49, 0.6)',
          width: '100%',
          border: '2px solid rgba(36, 81, 156, 0.8) ',
        }}
      >
        <Map
          ref={this.Map}
          style={{ height: '100%', backgroundColor: '#00000' }}
          backgroundColor={[36, 47, 62, 1]}
          center={new BMapGL.Point(115.41904424, 33.77267236)}
          enableScrollWheelZoom={true}
          zoom={13}
          mapStyleV2={{ styleJson: mapStyle }}
        >
          {
            riverData.map((river, i) => {
              return <Polyline key={i} path={river} strokeColor={colorData[i]} strokeWeight={5} />
            })
          }


          <Polygon
            path={luyiboundary}
            strokeColor="#fff"
            strokeWeight={1}
            fillColor="#fff"
            fillOpacity={0.1}
            onMouseover={(e) => {
              console.log(e);
            }}
          />
          <Polygon
            path={danchengboundary}
            strokeColor="#fff"
            strokeWeight={1}
            fillColor="#fff"
            fillOpacity={0.1}
            onMouseover={(e) => {
              console.log(e);
            }}
          />
          <ZoomControl />
          <NavigationControl />
        </Map>
      </div>
    );
  }
}
export default MapApiLoaderHOC({ ak: Map_AK })(MapChart);
